<template>
	<view class="container">
		<view class="MyInfo">
			<!-- picture [照片] -->
			<image src="/static/image/juxing.png" class="userPicImg"></image>
			<!-- <view class="userPicImg"></view> -->
			<view class="MyInfoText">
				<text class="MyInfoH1">{{hname}}</text>
				<text class="MyInfoH2">{{memberTypeText}}房</text>
				<!-- {{uerInfo.userName}} -->
			</view>
		</view>
		<view class="personal">
			<!-- 修改密码 -->
			<view class="ChangePass" @click="openChangePass()">
				<view class="changepassImg Icon-size icon-rule"></view>
				<text>修改密码</text>
				<text class="moreIcon">></text>
			</view>
			<!-- 查看版本号 -->
			<view class="ViewEdition" @click="ViewVersion">
				<view class="vieweditionImg Icon-size icon-rule"></view>
				<text>查看当前版本号</text>
				<text class="moreIcon">></text>
			</view>
			<!-- 清除缓存 -->
			<view class="ClearCache" @click="ClearData">
				<view class="clearcacheImg Icon-size icon-rule"></view>
				<text>清除app缓存</text>
				<text class="moreIcon">></text>
			</view>

			<!-- 重启app -->
			<view class="RestartApp" @click="RestarApp">
				<view class="restarappImg Icon-size icon-rule"></view>
				<text>重启app</text>
				<text class="moreIcon">></text>
			</view>

			<!-- 切换老人 -->
			<view class="members" @click="switchFamilies">
				<view class="clearcacheImg Icon-size icon-rule"></view>
				<text>切换老人</text>
				<text class="moreIcon">></text>
			</view>

		</view>
		<!-- 查看帮助 -->
		<!-- <view class="ViewHelp">
			<view class="viewhelpImg Icon-size icon-rule"></view>
			<text>查看使用帮助</text>
			<text class="moreIcon">></text>
		</view> -->
		<!-- android跳转-->
		<!-- <view class="ViewHelp" @click="goActivity">
			<view class="viewhelpImg Icon-size icon-rule"></view>
			<text>跳转到安卓原生activity（测试）</text>
			<text class="moreIcon">></text>
		</view>
		<view class="ViewHelp" @click="goTuya">
			<view class="viewhelpImg Icon-size icon-rule"></view>
			<text>涂鸦设备配网（测试-homeId:37790721）</text>
			<text class="moreIcon">></text>
		</view> -->
		<!-- 退出登录 -->
		<view class="cancellation" @click="closeOutlog">
			<!-- <view class="outlogImg Icon-size icon-rule"></view> -->
			<text>退出登陆</text>
			<!-- <text class="moreIcon">></text> -->
		</view>
		<!-- 提示框 -->
		<!-- 清除缓存 -->
		<view class="tips" v-show="!isShow">
			<view class="tips_Container">
				<image src="/static/image/ClearData_03.jpg" mode="center"></image>
				<text>是否清除缓存:<text style="color: #F43530;">{{fileSizeString}}</text>大小</text>
				<button class="sub_button" @tap="clearStorage">确认清除</button>
			</view>
			<view class="Close_tips" @click="ClearData()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<!-- 重启app -->
		<view class="retip" v-show="!reisShow">
			<view class="tips_Container">
				<image src="/static/image/restart.png" mode="center"></image>
				<text>是否重启app</text>
				<button class="sub_button" @click="onAppRestart()">确认重启</button>
			</view>
			<view class="Close_tips" @click="RestarApp()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<!-- 退出登陆 -->
		<view class="retip" v-show="!outisShow">
			<view class="tips_Container">
				<image src="/static/image/restart.png" mode="center"></image>
				<text>是否退出登陆</text>
				<button class="sub_button" @click="Logout()">确认退出</button>
			</view>
			<view class="Close_tips" @click="closeOutlog()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<!-- 当前版本 -->
		<view class="retip" v-show="!versionisShow">
			<view class="tips_Container">
				<image src="/static/image/logo3.png"
					style="border-radius: 5%; box-shadow: #959595 0rpx 3rpx 3rpx; height: 250rpx; width: 250rpx;"
					mode="heightFix"></image>
				<text>颐养中心园区App</text>
				<text>
					V{{version}}
					<!-- 最新版本{{appvalues}} -->
				</text>
				<!-- <button v-show="isDol" @click="doUpData()" type="default" style="margin: -30px 0 10px 0;line-height: 40rpx;height: 80rpx;">下载更新</button> -->
				<!-- <button type="default" @click="doLogout()">确认退出</button> -->
			</view>
			<view class="Close_tips" @click="closeVer()">
				<view class="item" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="42" />
				</view>
			</view>
		</view>
		<app-update ref="app_update" :force="false" :tabbar="false"></app-update> 
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update"; //app更新组件 //暂时注释起来
	// import {
	// 	mapState,
	// 	mapMutations
	// } from 'vuex';
	export default {
		// computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				title: '我的',
				user: {}, //获取的客户信息
				isShow: true,
				reisShow: true,
				outisShow: true,
				versionisShow: true,
				isDol: false,
				version: '',
				hname: '',
				iconType: ['clear'],
				total: 0,
				fileSizeString: '',
				appConfig: [],
				appvalues: '',
				memberTypeText: '',
				viewObj: null, //原生遮罩view
				//下载弹窗和进度条
				updateProgress: {
					popup: true,
					precent: 0
				}
			}
		},
		onLoad() {
			this.checkopenSocket() //打开推送
		},
		onShow() {
			this.getUser();
			this.comd();
			this.getAppConfig();
			this.onSocketMessage()
		},
		components: {
			appUpdate //暂时注释起来
		},
		mounted() {
			this.$refs.app_update.update(); //调用子组件检查更新方法 //暂时注释起来
		},
		onLoad() {
			// this.appConfig = uni.getStorageSync('AppConfig')
			// console.log(this.appConfig)
			//#ifdef APP-PLUS
			// this.update() //检测当前app版本是否需要更新
			//#endif
			this.formatSize()
			// console.log(uni.getStorageSync('HC_name'))
			this.getName();
			// #ifdef APP-PLUS|| MP-WEIXIN
			this.iconType = [
				'clear'
			]
			// #endif
			// #ifdef MP-ALIPAY
			this.iconType = ['clear']
			// #endif
			// #ifdef MP-BAIDU
			this.iconType = ['clear']
			// #endif

		},
		methods: {
			switchFamilies() {
				uni.navigateTo({
					url: '/pages/user/families/index',
				});
			},
			async getAppConfig() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-mobile/config/3',
						method: "get",
					})
				this.appConfig = res.body.command
				this.appvalues = res.body.command[1].appvalue
				uni.setStorageSync('scurl', res.body.command[4].appvalue);
				// uni.setStorageSync('AppConfig', res.body.command)
			},
			comd() {
				const value = uni.getStorageSync('name');
				const memberTypeText = uni.getStorageSync('uniqueCode');
				this.memberTypeText = memberTypeText;
				// for(let i=0;i<value.length;i++){
				// 	console.log(value[i].id)
				// }

				this.hname = value
			},
			// 官方下拉刷新
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			// ...mapMutations(['logout']),
			// bindlogin() {
			// 	if (this.hasLogin) {
			// 		this.logout()
			// 	} else {
			// 		uni.navigateTo({
			// 			url: '/pages/login/index'
			// 		})
			// 	}
			// },
			async news() {
				const res = await this.$myRequest({
					url: '/api-msg/messages/',
					method: "get",
					data: {
						isReaded: 0,
					}
				})
				if (res.success == true) {
					this.total = res.data.totalSize
					var quantity
					if (this.total == 0) {
						uni.removeTabBarBadge({
							index: 1,
						})
					} else if (this.total >= 99) {
						quantity = "99+"
					} else {
						quantity = this.total
						quantity = quantity.toString()
					}
					uni.setTabBarBadge({
						index: 1,
						text: quantity,
					})
				}
			},
			async getUser() { //读取客户信息
				//以下为订餐网站的测试接口。在没有正式接口以前先不要改动
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/currentUser'
					})
				if (res.success == true) { //如果读取信息成功
					this.user = res.body.currentUser;
					this.news()
					this.checkopenSocket() //打开推送
				} else if (res.success == false) { //如果读取信息成功
					uni.removeTabBarBadge({
						index: 1,
					})
				}
			},
			async Logout() {
				const res = await this
					.$myRequest({
						url: '/api-operate/families/app/security/logout'
					})
				if (res.success == true) {
					// 	//注销后移除app保存的信息
					uni.removeStorageSync('loginName');
					uni.removeStorageSync('id');
					uni.removeStorageSync('x-auth-token');
					uni.removeStorageSync('loginAndReturnPage');
					uni.removeStorageSync('HC_name');
					uni.removeStorageSync('HC_pass');
					uni.removeStorageSync('name');
					uni.removeStorageSync('id');
					uni.removeStorageSync('uniqueCode');
					uni.removeStorageSync('memberName');
					uni.removeStorageSync('memberTypeText');
					uni.clearStorageSync();
					//WebSocket关闭
					uni.closeSocket();
					uni.onSocketClose(function(res) {
						console.log('WebSocket 已关闭！');
					});
					//从涂鸦注销
					const userModule = uni.requireNativePlugin("LJY-UserModule") //调用android中自定义的插件名称
					//执行涂鸦智能注销，不关乎是否注销成功
					userModule.logout();
					uni.removeTabBarBadge({
						index: 1,
					})
					uni.redirectTo({ //关闭当前页面，跳转到应用内的某个页面。
						url: '/pages/user/login/index'
					})
				}
			},
			ClearData() {
				this.isShow = !this.isShow;
			},
			RestarApp() {
				this.reisShow = !this.reisShow;
			},
			closeOutlog() {
				this.outisShow = !this.outisShow;
			},
			closeVer() {
				this.versionisShow = !this.versionisShow;
			},
			ViewVersion() {
				this.version = plus.runtime.version
				// plus.runtime.getProperty(plus.runtime.appid, function(inf) {
				// 	this.version = inf.version
				// 	console.log('获取版本号: '+JSON.stringify(i));
				// });
				console.log('当前版本: '+this.version) //当前版本
				console.log('远端版本: '+this.appConfig[1].appvalue) //远端版本

				let me_version = this.version
				let server_version = this.appConfig[3].appvalue
				// if (me_version < server_version) {
				// 	this.isDol = true
				// } else {
				// 	this.isDol = false
				// }
				if (me_version < server_version) {
					console.log("私人版本小于服务器版本")
					this.$refs.app_update.update(); //调用子组件检查更新方法
					// this.versionisShow = !this.versionisShow;
					// this.versionisShow = !this.versionisShow;
					// this.isDol = false
				} else if (me_version === server_version) {
					console.log("私人版本等于服务器版本")
					this.versionisShow = !this.versionisShow;
					// this.$refs.app_update.update(); //调用子组件检查更新方法
					this.isDol = false
				} else {
					console.log("私人版本大于服务器版本")
					// this.$refs.app_update.update(); //调用子组件检查更新方法
					// this.isDol = true
					this.isDol = false
					this.versionisShow = !this.versionisShow;
				}


				// this.versionisShow = !this.versionisShow;
			},
			update() {
				var _this = this;
				uni.request({
					url: `http://pension.bcjkcloud.com:10030/api-mobile/config/3`, //请求接口
					method: 'GET',
					header: {
						'x-auth-token': uni.getStorageSync('idToken')
					},
					success: res => {
						if (res.data.success == true) {
							plus.runtime.getProperty(plus.runtime.appid, function(inf) {
								// console.log('反现新版本plus.runtime.appid: '+plus.runtime.appid); //HBuilder
								const newversion = res.data.body.command[3].appvalue;
								const downloadurl='http://pension.bcjkcloud.com/static/apk/' +
												res.data.body.command[2].appvalue
												console.log('执行到了新建下载任务res: '+downloadurl);
								if (inf.version != newversion) {
									//开始处理事件
								} else {
									uni.showModal({
										showCancle: false,
										content: '获取更新失败'
									})
								}
							});
						}
					},
				})
			},
			updateB() {
				var _this = this;
				uni.request({
					url: `http://pension.bcjkcloud.com:10030/api-mobile/config/3`, //请求接口
					method: 'GET',
					header: {
						'x-auth-token': uni.getStorageSync('idToken')
					},
					success: res => {
						console.log('调用接口的返回数据: ' + JSON.stringify(res));
						if (res.data.success == true) {
							//方法2：
							plus.runtime.getProperty(plus.runtime.appid, function(inf) {
								// console.log('反现新版本plus.runtime.appid: '+plus.runtime.appid); //HBuilder
								const newversion = res.data.body.command[3].appvalue;
								// console.log('发现新版本: '+inf.version);
								if (inf.version != res.data.body.command[3].appvalue) {
									uni.showModal({
										title: "发现新版本" + newversion,
										content: "确认下载更新",
										success: (res) => {
											if (res.confirm == true) { //当用户确定更新，执行更新
												_this.doUpData();
											}
										}
									})
								}
							});
						}
					},
				})
			},
			doUpData() {
				// 修改这边的样式
				this.viewObj = new plus.nativeObj.View('viewObj', {
					bottom: '0px',
					left: '0px',
					height: '100%',
					width: '100%',
					backgroundColor: "rgba(0,0,0,.6)"
				});
				this.viewObj.show() //显示原生遮罩
				//开启更新
				uni.showLoading({
					title: '更新中……'
				})
				// 修改这边的样式
				uni.downloadFile({ //执行下载
					url: 'http://pension.bcjkcloud.com/static/apk/JSAPP.apk', //下载地址
					success: downloadResult => { //下载成功
						uni.hideLoading();
						this.viewObj.hide();
						if (downloadResult.statusCode == 200) {
							uni.showModal({
								title: '',
								content: '更新成功，确定现在重启吗？',
								confirmText: '重启',
								confirmColor: '#EE8F57',
								success: function(res) {
									if (res.confirm == true) {
										console.log('确认重启APP');
										plus.runtime.install( //安装
											downloadResult.tempFilePath, {
												force: true
											},
											function(res) {
												utils.showToast('更新成功，重启中');
												plus.runtime.restart();
											}
										);
									}
								}
							});
						}
					}
				});
			},
			openChangePass() {
				uni.navigateTo({
					url: '/pages/user/passwordEdit/index',
				});
			},
			toEdition() {
				uni.navigateTo({
					url: '/pages/user/ViewEditionPage/ViewEditionPage',
				});
			},
			async getName() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/currentUser',
						method: "get",
					})
				// console.log(res)
				// this.hname = res.body.currentUser.name
				// console.log(this.hname)

			},
			onAppRestart() { //重启APP，只有在真机情况下有用
				plus.runtime.restart();
			},
			// goActivity() { //跳转到指定Activity
			// 	//获取当前Activity  
			// 	const main = plus.android.runtimeMainActivity();
			// 	//通过反射获取Android的Intent对象
			// 	const Intent = plus.android.importClass("android.content.Intent");
			// 	//通过宿主上下文创建 intent
			// 	const intent = new Intent(main.getIntent());
			// 	//设置要开启的Activity包类路径  com.HBuilder.integrate.MainActivity换掉你自己的界面
			// 	intent.setClassName(main, "io.dcloud.application.activity.MyActivity");
			// 	//开启新的任务栈 （跨进程）
			// 	intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
			// 	//向原生界面传值操作
			// 	intent.putExtra("uni_key", "来自uniapp的值");
			// 	//开启新的界面
			// 	//main.startActivity(intent);
			// 	//请求码保证了，开始的新界面和返回的是同一个操作
			// 	var CODE_REQUEST = 1000
			// 	//采用startActivityForResult开启新的界面，当界面关闭时可以处理返回结果， CODE_REQUEST请求码是唯一标识
			// 	main.startActivityForResult(intent, CODE_REQUEST);

			// 	//设置原生界面返回后的回调操作
			// 	main.onActivityResult = function(requestCode, resultCode, data) {
			// 		if (requestCode == CODE_REQUEST) {
			// 			console.log(requestCode); //这个是正确的 1000  
			// 			console.log(resultCode); //始终都是0  
			// 			console.log(data); //undefined   
			// 			/* uni.redirectTo({ //关闭当前页面，跳转到应用内的某个页面。
			// 				url: '/pages/user/login/index'
			// 			}) */
			// 		}

			// 	}
			// },
			// goTuya() { //涂鸦智能测试
			// 	uni.showLoading({
			// 		title: '正在跳转到涂鸦官方配网界面'
			// 	});
			// 	let message = "";
			// 	try {
			// 		const deviceConfigModule = uni.requireNativePlugin("LJY-DeviceConfigModule") //调用android中自定义的插件名称
			// 		//跳转到涂鸦智能配网UI
			// 		const ret = deviceConfigModule.startDeviceActiveAction({ //login表示自定义插件的函数名，第一个表示要传递的参数
			// 			homeId: "37790721"
			// 		});
			// 		uni.hideLoading(); //加载结束
			// 		message = ret.msg;
			// 	} catch (e) { //如果涂鸦智能无法连接
			// 		uni.hideLoading(); //加载结束
			// 		message = "跳转失败"
			// 	}
			// 	uni.showToast({
			// 		title: message,
			// 		mask: true,
			// 		duration: 2000
			// 	});
			// },
			formatSize() { //计算缓存
				// this.fileSizeString = plus.cache.calculate
				// console.log(JSON.stringify(this.fileSizeString))
				let that = this;
				uni.getStorageInfo({
					success(res) {
						//console.log(res.keys);
						//console.log(res.limitSize);
						let size = res.currentSize;
						if (size < 1024) {
							that.fileSizeString = size + 'B';
						} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
							that.fileSizeString = Math.floor(size / 1024 * 100) / 100 + 'KB';
						} else if (size / 1024 / 1024 >= 1) {
							that.fileSizeString = Math.floor(size / 1024 / 1024 * 100) / 100 + 'M';
						}
					}
				})
				// console.log(this.fileSizeString)
			},
			async clearStorage() {
				this.isShow = !this.isShow
				let that = this;
				uni.clearStorageSync();
				//重新获取并显示清除后的缓存大小
				that.formatSize();
				uni.showToast({
					title: '清除成功'
				})
				const res = await this
					.$myRequest({
						url: '/api-portal/logout'
					})
				if (res.success == true) {
					//注销后移除app保存的信息
					uni.removeStorageSync('loginName');
					uni.removeStorageSync('id');
					uni.removeStorageSync('x-auth-token');
					uni.removeStorageSync('loginAndReturnPage');
					//移除菜单权限
					uni.removeStorageSync('worker');
					uni.removeStorageSync('nodekeyArr');
					//从涂鸦注销
					const userModule = uni.requireNativePlugin("LJY-UserModule") //调用android中自定义的插件名称
					//执行涂鸦智能注销，不关乎是否注销成功
					userModule.logout();
					uni.removeTabBarBadge({
						index: 1,
					})
					uni.reLaunch({ //关闭当前页面，跳转到应用内的某个页面。
						url: '/pages/user/login/index'
					})
				}
			},
			//通知推送
			//判断是否已连接
			checkopenSocket() {
				uni.sendSocketMessage({
					data: "ping",
					success: res => {
						console.log('判断是否连接: ' + JSON.stringify(res))
						return
					},
					fail: err => {
						this.socket()
					}
				});
			},
			//打开连接
			socket() {
				uni.connectSocket({
					// url: 'http://pension.bcjkcloud.com:8088websocket/' + this.id + '/all', //测试的接口
					url: 'ws://pm.gxtimeloit.com:10034/websocket/' + this.id + '/all',//正式环境的接口
					// url: 'ws://pension.bcjkcloud.com:8088/websocket/' + this.id + '/all',
					// url: 'ws://icewould.tpddns.cn:18123',
					success: data => {
						console.log('打开连接: ' + JSON.stringify(data))
						// console.log(data)
					}
				});
				// this.js()

			},
			//	打开成功监听服务器返回的消息
			onSocketMessage() {
				// 消息
				uni.onSocketMessage(res => {
					// console.log(JSON.stringify('打开成功监听服务器返回的消息'+JSON.stringify(res)))
					getApp().globalData.getSocketMsg(res.data);
				});
			},

		}
	}
</script>

<style lang="less" scoped>
	// @import "~@/css/mixin.less";
	@import "~@/static/css/mixin.less";

	.icon-rule {
		width: 40rpx;
		height: 40rpx;
		background-repeat: no-repeat;
		background-position: center center;
	}


	.userPicImg {
		border-radius: 6px;
		width: 140rpx;
		height: 140rpx;
		margin: 0 26rpx 0 36rpx;

		// .userPic('userPicImg')

	}

	.outlogImg {
		.icon-OutLog('outlogImg');
	}

	.changepassImg {
		.icon-ChangePass('changepassImg');
	}

	.vieweditionImg {
		.icon-ViewEdition('vieweditionImg');
	}

	.clearcacheImg {
		.icon-ClearCache('clearcacheImg');
	}

	.restarappImg {
		.icon-RestartApp('restarappImg');
	}

	.viewhelpImg {
		.icon-ViewHelp('viewhelpImg');
	}


	.tips,
	.retip {
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 5;
		top: 0;
		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;
	}

	.tips_Container {
		width: 340px;
		height: 300px;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;

		font-weight: bold;

		margin-bottom: 25px;


	}

	.tips_Container text {
		margin: 18px 0 34px 0;
	}

	.tips_Container image {
		margin-top: 35px;
		width: 96px;
		height: 96px;
	}

	.tips_Container button {
		// background-color: #9AB0F0;
		width: 250px;
		height: 35px;
		line-height: 35px;
		border: 0;
		border-radius: unset;
		font-weight: 100;
		font-size: 16px;
		color: #FFFFFF;
	}

	.Close_tips {
		background-color: #FFFFFF;
		border-radius: 50%;
		width: 50px;
		height: 50px;

		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;
	}

	/* 	.Close_tips image {
		width: 20px;
		height: 20px;
	} */

	.MyInfo {
		height: 250rpx;
		width: 100%;
		background-color: #da422a;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-bottom: 16rpx;
	}

	.MyInfoText {
		display: flex;
		flex-direction: column;
		margin-left: 45rpx;
	}

	.MyInfoH1 {
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.MyInfoH2 {
		font-size: 35rpx;
		color: #FFFFFF;
	}

	.picture {
		border-radius: 6px;
		width: 51px;
		height: 51px;
		margin: 0 26rpx 0 36rpx;
	}

	.ChangePass,
	.ViewEdition,
	.ClearCache,
	.RestartApp,
	.ViewHelp {
		height: 100rpx;
		width: 90%;
		background-color: #FFFFFF;
		// margin-bottom: 16rpx;
		color: #565656;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-left: 40rpx;
	}

	.members {
		height: 100rpx;
		width: 90%;
		background-color: #FFFFFF;
		margin-top: 40rpx;
		color: #565656;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-left: 40rpx;
	}

	.cancellation {

		height: 100rpx;
		width: 90%;
		background-color: #fdfdfe;
		margin-top: 40rpx;
		color: #565656;
		font-size: 24rpx;
		// display: flex;
		// align-items: center;
		text-align: center;
		line-height: 100rpx;
		border-radius: 15rpx;
		flex-direction: row;
		margin-left: 40rpx;

	}

	.personal {}

	.Icon-size {
		width: 40rpx;
		height: 40rpx;
		margin: 0 30rpx 0 30rpx;
	}

	.moreIcon {
		color: #BABABA;
		margin-right: 90rpx;
		position: absolute;
		// margin-left: 80rpx;
		right: 0;
	}
</style>
